:host ::ng-deep .detail-info{
    $info-btn-color: #108ee9;

    .info-channel-panel{
        color: $info-btn-color;
        .channel{
            position: relative;
            display: inline-block;
            background-color: #108ee9;
            border-radius: 25px;
            font-weight: 300;
            color: #fff;
            padding: 4px 88px 4px 24px;
            min-width: 68px;
            font-size: 14px;
            line-height: 20px;
            vertical-align: middle;
            overflow: hidden;
            b{
                position: absolute;
                top: 1px;
                bottom: 0;
                right: 1px;
                margin: auto;
                // display: inline-block;
                width: 22px;
                height: 22px;
                border-radius: 50%;
                background-color: #e67878;
                text-align: center;
                line-height: 20px;
                font-size: 18px;
                font-weight: 300;
                display: none;
            }
            .channelprice{
                display: inline-block;
                height: 100%;
                width: 80px;
                position: absolute;
                right: 0;
                top: 0;
                overflow: hidden;
                background-color: #fff;
                .fl{
                    color: #000;
                    position: relative;
                    top: 4px;
                    left: 4px;
                }
                .seePrice{
                    position: relative;
                    top: 4px;
                    display: inline-block;
                    color: #7d7a7a;
                    padding-top: 2px 0 0 2px;
                }
                .ant-input-wrapper{
                    height: 100%;
                    width: 80%;
                    float: right;
                    input{
                        width: 100%;
                        height: 100%;
                        border: none;
                        &:focus{
                            box-shadow:none;
                        }
                    }
                }
            }
            &:hover{
                b{
                    display: inline-block;
                }
            }
        }
        .labelsinfo{
            background-color: #ffc107;
            padding: 4px 24px;
        }
        i{
            font-size: 22px;
            vertical-align: middle;
            cursor: pointer;
        }
    }
    .info-label-panel{
        i{
            color: #ffc107;
        }
    }
    .channel-panel-body{
        position:relative;
        &:after{
            content: '';
            width: 0;
            height: 100%;
            position: absolute;
            left: 78px;
            top: 32px;
            border-left: 1px dashed #d6e1f1;
        }
        tr{
            td{
                .ant-table-row-expand-icon{
                    position: relative;
                    z-index: 2;
                }
                &:nth-child(2){
                    position: relative;
                    text-align: left;
                    &:after{
                        content: '';
                        width: 0;
                        position: absolute;
                        left: 16px;
                        border-left: 1px dashed #d6e1f1;
                    }
                }
            }
            .lv-one{
                &:before{
                    content: '';
                    width: 10px;
                    position: absolute;
                    left: 16px;
                    top: 50%;
                    border-top: 1px dashed #d6e1f1;
                }
            }
            .lv-two{
                &:before{
                    content: '';
                    width: 10px;
                    position: absolute;
                    left: 16px;
                    top: 50%;
                    border-top: 1px dashed #d6e1f1;
                }
            }
            .lv-two-l{
                &:after{
                    left: 36px !important;
                    top: -50% !important;
                    height: 100% !important;
                }
                &:before{
                    content: '';
                    width: 30px !important;
                    position: absolute;
                    left: 36px !important;
                    top: 50%;
                    border-top: 1px dashed #d6e1f1;
                }
            }
        }
    }

    .ant-modal{
        width: 820px !important;
        .ant-modal-content{
            .ant-modal-body{
                max-height: 600px;
                overflow-y: scroll;
            }
        }
    }

}

.treeList{
    .treeHeader{
        height: 40px;
        line-height: 30px;
        text-align: center;
        font-size: 16px;    
    }
    .treeli{
        padding: 12px 8px;
        border-radius: 4px;
        border: 1px solid #d6e1f1;
        transition: 0.3s;
        i{
            font-size: 16px;
            position: relative;
            top: 1px;
        }
        label{
            width: 90%;
        }
    }
    .treeList_li{

    }
    .items_li_label{
        position: relative;
        display: inline-block;
        width: 90%;
        .twoSelect{
            position: absolute;
            top: 0;
            left: 0;
            color: #108ee9;
        }
    }
    .level1{

    }
    .level2{
        padding-left: 40px;
    }
    .level3{
        padding-left: 60px;
    }
}
.footer_panel{
    position: fixed;
    width: 100%;
    bottom: 0;
}
.info-sop{
    .info-sopErr{
        color: red;
    }
}